<template>
  <div>
        <div class="headerBox">
              <div class="line"></div>
              <div class="title">清洗记录</div>
        </div>
        <el-table :data="cleaningRecordList" border >
                <el-table-column label="清洗开始时间" align="left" prop="startTime" />
                <el-table-column label="清洗结束时间" align="left" prop="endTime" />
                <el-table-column label="使用的清洁剂" align="left" prop="useType" />
        </el-table>
        <pagination
          v-show="total>10"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getTankCleaningRecordsFn"
          />
  </div>
</template>

<script>
import { getTankCleaningRecords} from "@/api/zhangping/watherDrinking";
  export default {
    data() {
      return {
         cleaningRecordList:[],
         queryParams:{
            pageNum: 1,
            pageSize: 10,  
            waterCleanId:'',
         },
         total:0,
      };
    },
    created() {
          this.queryParams.waterCleanId = this.$route.query.waterCleanId
          this.getTankCleaningRecordsFn()
    },
    methods: {
        //清洗记录
        getTankCleaningRecordsFn(){
         getTankCleaningRecords(this.queryParams).then(res=>{
                if(res.code == 200){
                     this.cleaningRecordList = res.rows
                     this.total = res.total
                }else{
                     this.$message.error(res.msg);  
                }    
         })
       },
    }
  };
</script>
<style lang="scss" scoped>
        .display-fx-center{
             display: flex;
             align-items: center;
         }
        .headerBox{
                font-size: 16px;
                color: #484848;
                font-weight: bold;
                margin-top:40px;
                margin-bottom:15px;
                @extend .display-fx-center;
                .line{
                  width: 4px;
                  height: 12px;
                  background: #5D85FF;
                  border-radius: 6px 6px 6px 6px;
                  margin-right:6px;
                }
             }
        ::v-deep{
            .el-table__header-wrapper th{
                 background: #F4F8FF!important;    
           }
          //  鼠标移入表格行不变色
          .el-table .el-table__row:hover td {
            background-color: transparent !important;
          }
          .el-image,.el-image__inner{
               width: 80px!important;
               height: 30px!important;
               }
        }
</style>
